<template>
    <div id="addAddress">
        <el-dialog title="添加地址" :visible.sync="dialogVisible"
                   :before-close="handleClose" center>
            <el-form
                    :model="ruleForm"
                    :rules="rules"
                    ref="ruleForm">
                <el-form-item label="省/市/区:">
                    <el-cascader
                            size="large"
                            :options="options"
                            v-model="selectedOptions"
                            @change="handleChange">
                    </el-cascader>
                </el-form-item>
                <el-form-item label="详细地址:">
                    <el-input v-model="ruleForm.detail"></el-input>
                </el-form-item>
                <el-form-item label="收货人:">
                    <el-input v-model="ruleForm.username"></el-input>
                </el-form-item>
                <el-form-item label="联系电话:">
                    <el-input v-model="ruleForm.phone"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit">立即创建</el-button>
                    <el-button @click="closeAddAddressDialog">取消</el-button>
                </el-form-item>

            </el-form>
        </el-dialog>
    </div>
</template>

<script>

    import {CodeToText, regionDataPlus} from "element-china-area-data";

    export default {
        name: "AddAddress",
        props: ["addAddress"],
        data() {
            return {
                dialogVisible: false,
                options: regionDataPlus,
                selectedOptions: [],
                names: [],
                ruleForm: {
                    province: '',
                    city: '',
                    country: '',
                    detail: '',
                    userid: this.$store.getters.getUser.id,
                    username: '',
                    phone: ''
                }
            }
        },
        watch: {
            addAddress: function (val) {
                console.log(val)
                if (val) {
                    this.dialogVisible = val;
                }
            }
        },
        methods: {
            handleClose(done) {
                this.$confirm('确认关闭？')
                    .then(() => {
                        this.closeAddAddressDialog();
                        done();
                    })
                    .catch(() => {
                    });
            },
            closeAddAddressDialog() {
                this.$refs["ruleForm"].resetFields();
                this.$emit("fromChild", false);
                this.dialogVisible = false;
            },
            handleChange(value) {
                this.selectedOptions = value
                var name = ''
                this.selectedOptions.map(item => name += CodeToText[item] + '/')
                this.names = name.split('/')
                this.ruleForm.province = this.names[0]
                this.ruleForm.city = this.names[1]
                this.ruleForm.country = this.names[2]
            },
            onSubmit(){
                this.$axios({
                    method: 'post',
                    url: "/api/address/addAddress",
                    data: this.ruleForm
                }).then(res=>{
                    // “200”代表成功，其他的均为失败
                    if (res.data.code === 200) {
                        this.$emit('addAddress',this.ruleForm)
                        // 隐藏组件
                        this.closeAddAddressDialog();
                        // 弹出通知框提示成功信息
                        this.notifySucceed(res.data.msg);
                    } else {
                        // 弹出通知框提示失败信息
                        this.notifyError(res.data.msg);
                    }
                }).catch(
                    err => {
                        return Promise.reject(err);
                    }
                );
            }

        }
    }
</script>

<style scoped>

</style>